<script lang="ts" setup>
import { sy_Tabs_props } from '@/enum/component'
import Tabs from './Tabs.vue'

const { isActive = false, activeStyle } = defineProps<{
  isActive?: boolean
  activeStyle?: string | Record<string, string>
}>()

const tabsProps: InstanceType<typeof Tabs>['$props'] = inject(sy_Tabs_props)!
const el = useTemplateRef('el')

watchPostEffect(() => {
  if (!isActive) return
  scrollToView({
    scroll: el.value!.closest('.Tabs')!,
    target: el.value!,
    direction: tabsProps.direction,
    location: tabsProps.location,
  })
})
</script>

<template>
  <div class="Tab" :data-active="isActive">
    <div ref="el">
      <span class="content" :style="isActive && activeStyle">
        <slot />
      </span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.Tab {
  width: fit-content;

  >div {
    width: fit-content;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;

    >.content {
      position: relative;
      z-index: 1;
    }
  }
}
</style>
